<template>
  <div class="wrap">
    <div class="box">
      <div class="head">
        <logo></logo>
        <span>互/联/网/医/疗/平/台</span>
      </div>
      <div class="body">
        <div class="content">
          <div class="title">{{ showLoginBox ? "登录" : "快速注册" }}</div>
        </div>
        <Form
          ref="loginForm"
          :model="loginForm"
          :rules="loginValidate"
          class="loginBox"
          v-if="showLoginBox"
        >
          <FormItem prop="account">
            <Input
              type="text"
              size="large"
              v-model="loginForm.account"
              placeholder="账号"
            >
              <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
          <FormItem prop="password">
            <Input
              type="password"
              size="large"
              v-model="loginForm.password"
              placeholder="密码"
            >
              <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
          <Button
            size="large"
            shape="circle"
            long
            type="primary"
            @click="login"
          >
            登录
          </Button>
          <div class="changeBoxState">
            <span @click="showLoginBox = !showLoginBox">快速注册</span>
          </div>
        </Form>
        <Form
          class="registerBox"
          ref="registerForm"
          :model="registerForm"
          :rules="registerValidate"
          v-else
        >
          <FormItem prop="account">
            <Input
              type="text"
              size="large"
              v-model="registerForm.account"
              placeholder="账号"
            >
              <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
          <FormItem prop="password">
            <Input
              type="password"
              size="large"
              v-model="registerForm.password"
              placeholder="密码"
            >
              <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
          <FormItem label="角色">
            <RadioGroup v-model="registerForm.role">
              <Radio label="0" style="margin: 0px 35px">普通用户</Radio>
              <Radio label="1">医生</Radio>
            </RadioGroup>
          </FormItem>
          <Button
            size="large"
            shape="circle"
            long
            type="primary"
            @click="register"
          >
            立即注册
          </Button>
          <div class="changeBoxState">
            <span @click="showLoginBox = !showLoginBox">返回登录</span>
          </div>
        </Form>
      </div>
    </div>
  </div>
</template>

<script>
import logo from "@/components/logo.vue";
import { setSession } from "../../utils/index.js";
import validate from "./validate";

import {mapActions, mapMutations, mapState} from 'vuex'

import socket from "@/plugins/socketIO";
// import io from "socket.io-client"
// import { socketUrl } from "@/config/config";

export default {
  components: {
    logo,
  },
  data() {
    return {
      loginForm: {
        account: "123456",
        password: "123123",
      },
      registerForm: {
        account: "",
        password: "",
        role: "0",
      },
      showLoginBox: true,
      loginValidate: validate.loginValidate,
      registerValidate: validate.registerValidate,
    };
  },
  methods: {
    ...mapMutations(['changeLoginStatus']),
    // 登录
    login() {
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          this.HttpService.login(this.loginForm).then((res) => {
            if (res.code === 0) {
              this.$Message.success(res.message);
              setSession("token", res.data);
              this.getUserInfo(); 
              this.$store.commit('changeLoginStatus',true)
              this.$router.push("/index");
            } else {
              this.$Message.warning(res.message);
            }
          });
        }
      });
    },
    // 注册
    register() {
      this.$refs["registerForm"].validate((valid) => {
        if (valid) {
          this.registerForm.socketID = socket.id;
          console.log(this.registerForm);
          this.HttpService.register(this.registerForm).then((res) => {
            console.log(res);
            if (res.code === 0) {
              this.$Message.success(res.message);
              this.showLoginBox = true;
            } else {
              this.$Message.warning(res.message);
            }
          });
        }
      });
    },
    // 获取个人信息
    getUserInfo() {
      this.HttpService.getUserInfo().then((res) => {
        let role = res.data.role;
        if(role == '0'){
          setSession("isDoctor", false);
        } else {
          setSession("isDoctor", true);
        }
        setSession("userInfo", res.data);
      });
    },
  },
};
</script>

<style lang='less' scoped>
.wrap {
  background-color: #f8fafc;
  height: 100vh;
  position: relative;
  .box {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    .head {
      display: flex;
      align-items: center;
      margin-bottom: 40px;
      span {
        color: #1c1f21;
        font-weight: bold;
        position: absolute;
        right: 0px;
        letter-spacing: 4px;
      }
    }
    .body {
      width: 384px;
      // height: 346px;
      background-color: #ffffff;
      box-shadow: 0 12px 24px 0 #eee;
      border-radius: 12px;
      padding: 0 40px;
      .content {
        margin: 0 auto;
        .title {
          font-size: 18px;
          font-weight: bold;
          line-height: 90px;
        }
      }
      .loginBox,
      .registerBox {
        .changeBoxState {
          text-align: center;
          line-height: 70px;
          color: var(--theme-color);
          span {
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
